﻿<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>COVID-19</title>
  <link rel="stylesheet" href="css/main.css">
</head>


<body>
  <div class="canvas" style="opacity: .2">
    <iframe frameborder="0" src="./js/bg_star.html" style="width: 100%; height: 100%"></iframe>
  </div>
  <div class="loading">
    <div class="loadbox"> <img src="images/loading.gif"> Page is loading ... </div>
  </div>
  <div class="head">
    <h1>COVID-19 Visualization</h1>
    <div class="weather"> <span id="showTime"></span></div> 
  </div>

  <div class="mainbox">
    <ul class="clearfix">
      <li>
        <div class="boxall" style="height: 5rem">
          <div class="alltitle">Confirmed Cases By Country</div>
          <div class="allnav" id="chart_cases"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 5rem">
          <div class="alltitle">New Confirmed Cases</div>
          <div class="allnav" id="chart_daily_cases"></div>
          <div class="boxfoot"></div>
        </div>
      </li>
      <li>
        <div class="bar">
          <div class="barbox">
            <ul class="clearfix">
              <li id="total_num" class="pulll_left counter" style="color: red;"> </li>
              <li id="death_num" class="pulll_left counter" style="color: grey;"> </li>
            </ul>
          </div>
          <div class="barbox2">
            <ul class="clearfix">
              <li class="pulll_left">Confirmed Cases </li>
              <li class="pulll_left">Death Toll</li>
            </ul>
          </div>
        </div>
        <div class="map">
          <div class="map1"><img src="images/lbx.png"></div>
          <div class="map2"><img src="images/jt.png"></div>
          <div class="map3"><img src="images/map.png"></div>
          <div class="map4" id="main"></div>
        </div>
      </li>
      <li>
        <div class="boxall" style="height: 5rem">
          <div class="alltitle">Death Toll By Country</div>
          <div class="allnav" id="chart_death"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 5rem">
          <div class="alltitle">New Death Toll</div>
          <div class="allnav" id="chart_daily_death"></div>
          <div class="boxfoot"></div>
        </div>
      </li>
    </ul>
  </div>
  <div class="back"></div> 

  <script src="./js/jquery-3.5.1.min.js"></script>
  <script src="./js/d3.v5.min.js"></script>
  <script src="./js/echarts.min.js"></script> 
  <script type="module" src="main.js"></script>
</body>

</html>
